<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ref, reactive } from "vue";
import getmenudata from "../../grants/menudata";
import { useRouter } from 'vue-router';
import getRoutes, { clearCurrentRoutes } from "../../grants/router";
getRoutes();
//调用getmenudata()得到当前数据
const menudata = reactive(getmenudata());
const router = useRouter();
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
//定义username的变量
const username = ref(sessionStorage.getItem("username"));
const exitFn = () => {
    sessionStorage.clear();
    clearCurrentRoutes();//清除当前用户的路由配置；
    router.push("/Login");
}
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-dropdown split-button type="primary">
                    亲，欢迎您: {{ username }}
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="exitFn">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu :router="true" active-text-color="#ffd04b" background-color="#545c64"
                        class="el-menu-vertical-demo" default-active="2" text-color="#fff" @open="handleOpen"
                        @close="handleClose">
                        <!-- 循环列表得到页面数据 -->
                        <template v-for="item in menudata">
                            <el-menu-item v-if="!item.children" :index="item.path">
                                {{ item.label }}
                            </el-menu-item>
                            <el-sub-menu v-else :index="item.id">
                                <template #title>
                                    <span>{{ item.label }}</span>
                                </template>
                                <el-menu-item v-for="sonItem in item.children" :index="sonItem.path">{{ sonItem.label
                                }}</el-menu-item>
                            </el-sub-menu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<!-- <el-sub-menu index="Home">
                            <template #title>
                                <span class="shouye">首页</span>
                            </template>
                            <el-menu-item index="/Admin/Home">首页数据</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="1">
                            <template #title>
                                <span>商品信息管理</span>
                            </template>
                            <el-menu-item index="/Admin/CommodityList">商品列表</el-menu-item>
                            <el-menu-item index="/Admin/CommodityPage">商品分页</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <span>轮播图的管理</span>
                            </template>
                            <el-menu-item index="/Admin/List">轮播图列表
                            </el-menu-item>
                            <el-menu-item index="/Admin/Add">轮播图添加</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <span>操作人员管理</span>
                            </template>
                            <el-menu-item index="/Admin/OperatorList">操作人员列表
                            </el-menu-item>
                            <el-menu-item index="/Admin/OperatorAdd">添加操作人员</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <span>地址列表管理</span>
                                </template>
                                <el-menu-item index="/Admin/Adress">地址对应列表
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="5">
                                <template #title>
                                    <span>商品用户管理</span>
                                </template>
                                <el-menu-item index="/Admin/AllStatistic">商品数量列表
                                </el-menu-item>
                                <el-menu-item index="/Admin/Alluser">用户数量列表
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="6">
                                <template #title>
                                    <span>图表统计管理</span>
                                </template>
                                <el-menu-item index="/Admin/Echartsone">折线图
                                </el-menu-item>
                                <el-menu-item index="/Admin/Echartstwo">柱状图
                                </el-menu-item>
                            </el-sub-menu> -->
<style scoped>
.el-header {
    width: 100%;
    height: 80px;
    background-color: skyblue;
    display: flex;
    justify-content: end;
    align-items: center;
}

.shouye {
    margin-left: 25px;
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.common-layout {
    width: 100%;
    height: 100%;
}

.el-container {
    height: 100%;
}

.el-aside {
    height: 100%;
    background-color: #545c64;
}

.el-main {
    width: 100%;
    height: 100%;
    background-color: cornsilk;
}
</style>
